<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/label' }">标签</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:$route.path,query:{name:$route.query.name}}">
        {{$route.query.name}}
      </el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="label-tab">
      <el-tabs value="question" @tab-click="handleClick">
        <el-tab-pane label="技术问答" name="question">
          <question-list name="question" :page="page" :listData="questionList"
                         @fetch-data="fetchData"
          ></question-list>
        </el-tab-pane>
        <el-tab-pane label="博客文章" name="article">
          <article-list name="article" :page="page" :listData="articleList"
                        @fetch-data="fetchData"></article-list>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import questionList from '@/components/question/List.vue'
  import articleList from '@/components/article/List.vue'

  export default {
    components: {
      articleList,
      questionList
    },
    data() {
      return {
        articleList: []
      }
    },
    methods: {
      handleClick(tab) {
        console.log(tab)
        this.fetchData(tab.paneName, 1)
      },
      async fetchData(paneName, current) {
        this.page.pageNum = current
        let resopnse = null;
        const data = {
          labelId: this.$route.params.id,
          pageNum: current
        }
        switch (paneName) {
          case 'question':
            //查询技术问答列表
            resopnse = await this.$queryQuestionByLabelId(data);
            console.log("response=" + resopnse)
            this.page.total = resopnse.data.total
            this.questionList = resopnse.data.rows
            break;
          case 'article':
            //查询技术问答列表
            //封装标签id和分页对象{current,size,total,labelId} ...的作用是吧labelId放到了page对象里面
            const pageData = {
              labelId: this.$route.params.id,
              pageNum: 1
            }
            resopnse = await this.$queryArticleByLabelId(pageData);
            console.log("response=" + resopnse)
            this.page.total = resopnse.data.total
            this.articleList = resopnse.data.rows
            break;
          default:
            break
        }
      }
    },
    async asyncData({params, app}) {
      //首次加载页面 擦汗寻技术问答列表
      const page = {
        pageNum: 1,
        size: 10,
        total: 0
      }
      const pageData = {
        labelId: params.id,
        pageNum: 1
      }
      const {data} = await app.$queryQuestionByLabelId(pageData);
      page.total = data.total;
      return {page, questionList: data.rows}
    }
  }
</script>

<style scoped>
  .label-tab {
    margin-top: 20px;
  }
</style>
